  <template>
    <div id="container">
      <div>
        <el-row>
          <el-col :xs="24" :sm="24">
            <div class="content">
              <div>
                <div  class="tag-hot">
                    <span class="tag-hot-1">语言：</span>
                  <section>
                    <el-checkbox v-model="language1" label="备选项1" border size="small">Java</el-checkbox>
                    <el-checkbox v-model="language2" label="备选项2" border size="small">前端</el-checkbox>
                    <el-checkbox v-model="language3" label="备选项3" border size="small">Python</el-checkbox>
                    <el-checkbox v-model="language4" label="备选项4" border size="small">C语言</el-checkbox>
                  </section>

                </div>
              </div>
            </div>
            <div class="content">
              <div>
                <div  class="tag-hot">
                  <span class="tag-hot-1">标签：</span>
                  <section>
                    <el-checkbox v-model="article1" label="备选项1" border size="small">1</el-checkbox>
                    <el-checkbox v-model="article2" label="备选项2" border size="small">2</el-checkbox>
                    <el-checkbox v-model="article3" label="备选项3" border size="small">3</el-checkbox>
                    <el-checkbox v-model="article4" label="备选项4" border size="small">4</el-checkbox>
                    <el-checkbox v-model="article5" label="备选项5" border size="small">5</el-checkbox>
                  </section>

                </div>
              </div>
            </div>
            <div class="content">
              <div>
                <div  class="tag-hot">
                  <span class="tag-hot-1">排序：</span>
                  <section>
                    <el-checkbox v-model="tag1" label="备选项1" border size="small">热门</el-checkbox>
                    <el-checkbox v-model="tag2" label="备选项2" border size="small">最新</el-checkbox>
                    <el-checkbox v-model="tag3" label="备选项3" border size="small">点赞</el-checkbox>
                    <el-checkbox v-model="tag3" label="备选项3" border size="small">浏览</el-checkbox>
                  </section>

                </div>
              </div>
            </div>

          </el-col>
        </el-row>
<!--        <tags />-->
        <articleA :mytest="sur"></articleA>
        <page></page>
        <moreA/>
      </div>
    </div>
  </template>

  <script>
    // import
  export default {
    data() {
      return {
        sur:{
          title:'最新文章2',
          mytest:'1222',
        },
        mytest:'222222',
        checked1: true,
        checked2: false,
        checked3: false,
        checked4: true,
        checked5: true,
        checkboxGroup1: [],
        checkboxGroup2: []
      };
    },

  };
  </script>


  <style lang="scss" scope>
  .content {
    border: 1px solid #e4e4e4;
    //   height: 20px;
    //   background-color: #65f;
    margin: 10px;
    border-radius: 5px;
  }
  .el-checkbox{
      margin: 0 0 5px;
  }
  .tag-hot{
      font-size: 13px;
      section{
        display: inline-block;
        padding: 0 0 0 20px;
      }
  }

    .tag-hot-1{
      display: inline-block;
      border-right: 1px solid #e4e4e4;
      height: 42px;
      line-height: 42px;
      padding: 0 0 0 70px;
      background-color: #f1f1f1;
      border-radius: 5px 0 0 5px;
    }


  </style>
